<template>
  <div class="q-git-commit">
    <el-select v-model="currentBranch" size="medium" :loading="branchLoading" @visible-change="getBranchTag" @change="fetchData">
      <el-option-group label="分支">
        <el-option
          v-for="item in branches"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-option-group>
      <el-option-group label="标签">
        <el-option
          v-for="item in tags"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-option-group>
    </el-select>
    <span style="margin-left:20px;">{{ this.$route.params.pname }}</span>
    <el-date-picker
      v-model="dateScope"
      style="float:right"
      type="daterange"
      unlink-panels
      size="medium"
      format="yyyy-MM-dd HH:mm"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="fetchData"
    />
    <el-divider />
    <div class="commit-group" v-for="(item, index) in list" :key="index">
      <div class="commit-group-title">{{ index }}·{{ item.num }}次提交</div>
      <div class="commit-group-item" v-for="(commit, idx) in item.commits" :key="idx">
        <el-avatar shape="circle" :src="commit.avatar" />
        <div class="commit-group-item__info">
          <div>{{ commit.commit.message }}</div>
          <div>由 {{ commit.commit.committer_name }} 提交于 {{ commit.commit.committed_date | filterTime }}</div>
        </div>
        <el-button-group>
          <el-button size="medium">
            <router-link :to="commitDetailUrl(commit.commit.id)">
              {{ commit.commit.short_id }}
            </router-link>
          </el-button>
          <el-button size="medium"><i
            v-clipboard:copy="commit.commit.id"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            class="el-icon-document-copy"
          /></el-button>
          <el-button
            size="medium"
            icon="el-icon-folder-opened"
            @click="openFile(commit.commit.id)"
          ></el-button>
        </el-button-group>
      </div>
    </div>
    <!-- <template v-for="(item, index) in list">
      <el-row class="commit-bar">
        <el-col :span="6"><span>{{ index }}·{{ item.num }}次提交</span></el-col>
      </el-row>
      <el-row v-for="v in item.commits" class="group-bottom">
        <el-col :span="1">
          <el-avatar style="margin-top:15px;" shape="circle" :src="v.avatar" />
        </el-col>
        <el-col style="margin-left:-30px;" :span="11">
          <ul>
            <li class="li-msg" :title="v.commit.message">
              <router-link :underline="false" :to="commitDetailUrl(v.commit.id)">
                {{ v.commit.message }}
              </router-link>
            </li>
            <li><span class="commit-desc">由 {{ v.commit.committer_name }} 提交于 {{ v.commit.committed_date | filterTime }}</span>
            </li>
          </ul>
        </el-col>
        <el-col :span="5" :offset="7">
          <el-button-group style="margin-right:-30px; margin-top:14px;float:right ">
            <el-button>
              <router-link :to="commitDetailUrl(v.commit.id)">
                {{ v.commit.short_id }}
              </router-link>
            </el-button>
            <el-button><i
              v-clipboard:copy="v.commit.id"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              class="el-icon-document-copy"
            /></el-button>
            <el-button @click="openFile(v.commit.id)"><i class="el-icon-folder-opened" /></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </template> -->
    <el-row style="margin-top:20px;">
      <el-button-group>
        <el-button type="primary" size="mini" :disabled="allowChangePage(-1)" @click="changePage(-1)">上一页</el-button>
        <el-button type="primary" size="mini" :disabled="allowChangePage(1)" @click="changePage(1)">下一页</el-button>
      </el-button-group>
      前往
      <el-input v-model="page" size="mini" min="1" style="width: 80px" autocomplete="off" @change="changePage(0)"/>
      页
    </el-row>
  </div>
</template>

<script>
import { getData } from '@/api/requestData'
import { parseTime } from '@/utils/index'

export default {
  filters: {
    filterTime(time) {
      return parseTime(time, '{h}:{i}:{s}')
    }
  },
  data() {
    return {
      pid: this.$route.params.pid,
      pname: this.$route.params.pname,
      branches: [],
      tags: [],
      listLoading: true,
      currentBranch: '',
      branchLoading: true,
      list: [],
      listLength: 0,
      dateScope: [],
      page: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.currentBranch = this.$route.query.branch ? this.$route.query.branch : 'master'
    this.fetchData()
  },
  methods: {
    changePage(page) {
      if (page === -1) {
        this.page--
      } else if (page === 1) {
        this.page++
      }
      this.fetchData()
    },
    fetchData() {
      const pid = this.$route.params.pid
      const params = {
        ref: this.currentBranch,
        page: this.page,
        perPage: 100,
      }
      if (this.dateScope[0] !== undefined) {
        params['startTime'] = this.dateScope[0]
        params['endTime'] = this.dateScope[1]
      }
      getData('/git/public/commit/list/' + pid, params).then((response) => {
        this.listLoading = true
        for (var index in response.data) {
          // console.log(response.data[index].commits.length)
          this.listLength += response.data[index].commits.length
        }
        this.list = Object.keys(response.data).reverse().reduce(function(a, b) {
          a[b] = response.data[b]
          return a
        }, {})
        this.listLoading = false
      }).catch(() => {
        this.listLoading = true
      })
    },
    // 点击分支select加载数据
    getBranchTag() {
      const pid = this.$route.params.pid
      getData('/git/public/branch/tag/' + pid).then((response) => {
        this.branches = response.data.branches
        this.tags = response.data.tags
        this.branchLoading = false
      })
    },
    onCopy(e) {
      // 复制成功
      this.$message.success('复制成功')
    },
    onError(e) {
      // 复制失败
      this.$message('复制失败')
    },
    openFile(commitId) {
      const pid = this.$route.params.pid
      const pname = this.$route.params.pname
      this.$router.push({ path: '/git/code/' + pid + '/' + pname + '/' + commitId + '/root' })
    },
    commitDetailUrl(sha) {
      return '/git/commit/detail/' + this.pname + '/' + this.pid + '/' + sha
    },
    allowChangePage(type) {
      const page = this.page
      if (type === -1 && page === 1) {
        return true
      }
      if (type === 1 && this.listLength < 100) {
        return true
      }
    }
  }
}
</script>
<style scoped>
.commit-bar {
  height: 40px;
  line-height: 40px;
  background-color: #FAFAFA;
  font-family: Microsoft YaHei, serif;
}

.group-bottom {
  border-bottom: 1px solid #F0F0F0;
}

.commit-desc {
  font-family: Microsoft YaHei, serif;
  font-size: small;
}

li {
  list-style: none;
  padding: 1px 1px;
}

.li-msg {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>

<style lang="scss" scoped>
.q-git-commit {
  .commit-group {
    &-title {
      background-color: #FAFAFA;
      height: 40px;
      line-height: 40px;
    }
    &-item {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      &__info {
        margin-left: 24px;
        div:first-child {
          line-height: 28px;
        }
        div:last-child {
          font-size: 14px;
        }
      }
      .el-button-group {
        margin-left: auto;
      }
    }
  }
}
</style>
